<template>
  <div id="home" v-if="flashingScreen" v-cloak :class="{ h5: this.$store.state.webType === 'h5' }">
    <el-row :span="24" class="page">
      <el-col :span="24">
        <el-carousel
          trigger="click"
          :height="bannerHeight + 'px'"
          :initial-index="currentIndex"
          ref="homeCarousel"
          @change="changeBanner"
          indicator-position="none"
        >
          <!-- :src="banner.imgUrl" -->
          <el-carousel-item v-for="(banner, bdx) in bannerList" :name="bdx + ''" :key="bdx">
            <img
              v-if="$store.state.webType !== 'h5'"
              @click.stop="$goDetail(banner.id)"
              src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/c7266c1c71db4a91bca09ccaf85d2fde_mergeImage.png"
              :alt="banner.title"
            />
            <div v-if="$store.state.webType !== 'h5'" class="banner-big-info">
              <div class="banner-big-info-who">Who We Are</div>
              <div class="banner-big-info-content">{{ banner.title }}</div>
              <div class="banner-big-info-more">more --></div>
            </div>
            <div
              v-else
              @click.stop="$goDetail(banner.id)"
              :style="{
                height: '100%',
                background: `url('${banner.imgUrl}') no-repeat  center`,
                backgroundSize: 'contain',
              }"
            ></div>
          </el-carousel-item>
        </el-carousel>
        <div class="col-text" v-if="$store.state.webType === 'h5'">
          <template v-for="(banner, bdx) in bannerList">
            <div
              v-show="currentIndex == bdx"
              @click="changeBanner(bdx)"
              class="text-item"
              :class="{ active: currentIndex == bdx }"
            >
              <div class="two-line">
                {{ $store.state.lang == "CN" ? banner.title : banner.titleEnglish }}
              </div>
            </div>
          </template>
        </div>
        <div class="banner-col">
          <!--              @click="changeBanner(bdx)"-->
          <!-- <div class="col-text" v-if="$store.state.webType === 'pc'">
            <template v-for="(banner, bdx) in bannerList">
              <div
                @click="$goDetail(banner.id)"
                class="text-item"
                :class="{ active: currentIndex == bdx }"
              >
                <div>
                  <div class="two-line">
                    {{ banner.title }}
                  </div>
                </div>
              </div>
            </template>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <el-row :span="24" class="page-content">
      <div class="advertise-view" v-if="advertiseDatA.length > 0">
        <div class="advertise-view-top">
          <img
            style="width: 350px"
            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/de72c14adf4542c8a020b17cb9179664_mergeImage.png"
          />
          <div class="adv_view_top_right">
            <span>WFUCA addressed at 43nd Session of UNESCO General Conference </span>
            <span>Novermber 14,2023 by Secretariat of WFUCA</span>
            <span
              >Mr.&nbsp;Bolat&nbsp;Akchulakov,&nbsp;President&nbsp;of&nbsp;the&nbsp;World&nbsp;Federation&nbsp;of&nbsp;UNESCO&nbsp;Clubs&nbsp;and&nbsp;Associations&nbsp;(WFUCA),&nbsp;addressed&nbsp;the&nbsp;participants&nbsp;at&nbsp;the&nbsp;general&nbsp;policy&nbsp;debate&nbsp;section&nbsp;of&nbsp;the&nbsp;42nd&nbsp;session&nbsp;of&nbsp;UNESCO&nbsp;General&nbsp;Conference,&nbsp;Paris.</span
            >
          </div>
        </div>
        <div class="advertise-view-center"><span>what we do?</span></div>
        <div class="advertise-view-bottom">
          <div class="adv_view_bot_item" v-for="item in newArray">
            <span>{{ item.title }}</span>
            <span>{{ item.date }}</span>
          </div>
        </div>
      </div>
      <div class="advertise_view_title">How We Do?</div>
      <div class="do_list">
        <div class="do_list_item" v-for="item in newArray2">
          <img
            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4fbe5d52fd0a40c3914c457f903ce2d6_mergeImage.png"
          />
          <span>{{ item.title }}</span>
          <span>{{ item.date }}</span>
          <span class="do_list_item_btn">More-></span>
        </div>
      </div>
      <div class="archives_box">
        <img
          src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/ecea3b78e9f74f058465115782719a89_mergeImage.png"
        />
        <div class="archives_box_right">
          <span>The Celebration of the 40th</span>
          <span>April 3,2023 by Secretariat of WFUCA</span>
          <span
            >The World congress is the supreme organ of the World Federation, which consists of the
            representaves of WFUCA Members. It meets every four years.</span
          >
        </div>
      </div>
      <div class="advertise_view_title">What We Get?</div>
      <div class="do_list">
        <div class="do_list_item" v-for="(item, index) in newArray2">
          <img
            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/1f1dc1b2f50b4ca783530b9eba650403_mergeImage.png"
          />
          <span
            style="
              overflow-wrap: break-word;
              color: rgba(0, 93, 176, 1);
              font-size: 16px;
              font-family: PingFangSC-Semibold;
              line-height: 23px;
              text-align: left;
            "
            >{{ item.date }}</span
          >
        </div>
      </div>
      <div class="last_more_btn">More--></div>

      <!-- ddzgList: [], // ------读懂中国
      tsList: [], // ------图说
      ssList: [], // ------数说
      zggsList: [], // ------我的中国故事
      wzyyList: [], // ------五洲有约 -->
      <div class="lm-bottom">
        <div class="right-col">
          <div class="col-line">
            <div class="line-item">
              <div class="item-view">
                <div class="item-title bg-half" @click.stop="$goDetail(wzyyList[0].id)">
                  {{ wzyyList[0].title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import HotArticle from "@/components/HotArticle";
import NewBook from "@/components/NewBook";
import LmItem from "@/components/LmItem";
export default {
  name: "Home",
  components: {
    HotArticle,
    NewBook,
    LmItem,
  },
  data() {
    return {
      // 解决闪屏问题
      flashingScreen: false,
      currentDate: new Date(),
      newArray2: [
        {
          title: "The World Congress",
          date: "The World congress is the supreme organ of the World Federation, which consists of the representaves of WFUCA Members. It meets every four years.",
        },
        {
          title: "The World Congress",
          date: "The World congress is the supreme organ of the World Federation, which consists of the representaves of WFUCA Members. It meets every four years.",
        },
        {
          title: "The World Congress",
          date: "The World congress is the supreme organ of the World Federation, which consists of the representaves of WFUCA Members. It meets every four years.",
        },
      ],
      //构建数组
      newArray: [
        {
          title: "The Celebration of the 40th Anniversary of the Establishment of WFUCA",
          date: "April 3, 2023 by Secretariat of WFUCA",
        },
        {
          title: "The Celebration of the 40th Anniversary of the Establishment of WFUCA",
          date: "April 3, 2023 by Secretariat of WFUCA",
        },
        {
          title: "The Celebration of the 40th Anniversary of the Establishment of WFUCA",
          date: "April 3, 2023 by Secretariat of WFUCA",
        },
        {
          title: "The Celebration of the 40th Anniversary of the Establishment of WFUCA",
          date: "April 3, 2023 by Secretariat of WFUCA",
        },
      ],

      // 当前展示的banner index
      currentIndex: 0,
      bannerList: [],
      bookData: {
        imgUrl: "",
        textList: [
          {
            title: "卷首发布",
            content: "在庆祝香港回归祖国25周年大会暨香港特别行政区第六届政府就职典礼上的讲话",
          },
          {
            title: "读懂中国",
            content: "永远的朋友 真诚的伙伴--寨中关系更进一步",
          },
        ],
      },
      articleData: [
        {
          title: "习近平：在庆祝中国共产主义青年团成立 100周年大会上的讲话",
        },
        {
          title: "我有一颗“中国心”",
        },
        {
          title: "弘扬爱国民主科学优良传统 为加快建设科技",
        },
        {
          title: "让新时代科学家精神在中华大地扎根绽放",
        },
        {
          title: "马克思主义哲学同中华优秀传统文化相结合的",
        },
        {
          title: "让新时代科学家精神在中华大地扎根绽放",
        },
        {
          title: "马克思主义哲学同中华优秀传统文化相结合的",
        },
        {
          title: "让新时代科学家精神在中华大地扎根绽放",
        },
        {
          title: "马克思主义哲学同中华优秀传统文化相结合的",
        },
        {
          title: "马克思主义哲学同中华优秀传统文化相结合的",
        },
      ],
      catData: [],
      currentNumIndex: 0,
      numSayData: [],
      imgSayData: [],
      advertiseDatA: [],
      bannerHeight: 0, // 轮播图容器高度;
      bannerHeight2: 0, // 轮播图容器高度;
      screenWidth: 0, // 页面宽度
      jsfbList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // 卷首发布List
      cxsmList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // --------初心使命
      zggjcList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // --------中国关键词
      sdjdList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ----------深度解读
      xzcList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // -----------新征程
      xsddzgrList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ------新时代的中国人

      ddzgList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ------读懂中国
      tsList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ------图说
      ssList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ------数说
      zggsList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ------我的中国故事
      wzyyList: [
        {
          imgUrl: "",
          lmName: "",
        },
      ], // ------五洲有约
    };
  },
  created() {
    //  console.log(this.$appType.name);
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth;
    this.bannerHeight = (750 / 1920) * this.screenWidth;
    this.bannerHeight2 = (440 / 1920) * this.screenWidth;
    if (this.$store.state.webType === "h5") {
      this.bannerHeight += 42;
    }
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.bannerHeight = (750 / 1920) * this.screenWidth;
      this.bannerHeight2 = (440 / 1920) * this.screenWidth;
      if (this.$store.state.webType === "h5") {
        this.bannerHeight += 42;
      }
    };
    // this.getHomeInfo();
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.flashingScreen = true;
      }, 300);
    });
  },
  computed: {
    // 获取名称
    getCallerName() {
      return (index) => {
        if (index === this.currentNumIndex) {
          if ((index + 1) % 2 === 0) {
            return `url(${require("@/assets/images/num-title-bg22.png")}) 100% 100% no-repeat`;
          }
          return `url(${require("@/assets/images/num-title-bg11.png")}) 100% 100% no-repeat`;
        }
        if ((index + 1) % 2 === 0) {
          return `url(${require("@/assets/images/num-title-bg02.png")}) 100% 100% no-repeat`;
        }
        return `url(${require("@/assets/images/num-title-bg01.png")}) 100% 100% no-repeat`;
      };
    },
  },
  methods: {
    goAd(link) {
      return;
      window.open(link, "_blank");
    },
    getHomeInfo() {
      this.$get(`${this.$api}/cms/web/getHomeInfo`, {
        token: sessionStorage.getItem("token"),
      }).then((res) => {
        //  console.log(res);
        this.catData = res.data.catData;
        this.bannerList = res.data.bannerList;
        this.imgSayData = res.data.imgSayData;
        this.numSayData = res.data.numSayData;
        this.advertiseDatA = res.data.advertiseDatA;

        this.jsfbList = res.data.jsfbList;
        this.cxsmList = res.data.cxsmList;
        this.zggjcList = res.data.zggjcList;
        this.sdjdList = res.data.sdjdList;
        this.xzcList = res.data.xzcList;
        this.xsddzgrList = res.data.xsddzgrList;

        this.ddzgList = res.data.ddzgList;
        this.tsList = res.data.tsList;
        this.ssList = res.data.ssList;
        this.zggsList = res.data.zggsList;
        this.wzyyList = res.data.wzyyList;
      });
    },
    changeBanner(index) {
      this.currentIndex = index;
      this.$refs.homeCarousel.setActiveItem(index);
    },
    changeNumShow(index) {
      //  console.log(index);
      this.$refs.carousel.setActiveItem(index);
      this.currentNumIndex = index;
      this.$nextTick(() => {
        const ref = `num${index}Ref`;
        // 获取myTabRef的DOM元素，即类名为my-tab的标签
        const line = this.$refs.myLineRef;
        const view = this.$refs.titleView;
        // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
        const active = this.$refs[ref][0].style;
        // console.log(line, active);
        if (this.$store.state.webType === "h5") {
          if (index > 0) {
            if (index >= this.numSayData.length - 1) {
              line.style.transform = `translateX(-${line.offsetWidth - view.offsetWidth - 20}px)`;
            } else {
              line.style.transform = `translateX(-${(index / this.numSayData.length) * 100}%)`;
            }
          } else if (index === 0) {
            line.style.transform = `translateX(-${0}%)`;
          }
        } else if (index > 2 && this.numSayData.length - index > 0) {
          if (index >= this.numSayData.length - 2) {
            line.style.transform = `translateX(-${line.offsetWidth - view.offsetWidth - 20}px)`;
          } else {
            line.style.transform = `translateX(-${((index - 2) / this.numSayData.length) * 100}%)`;
          }

          // let num = this.getTranslateX(document.querySelector(".view-max"));
          // line.style.transform = `translateX(${num - 20 * 10}}px)`;
        } else if (index === 0) {
          line.style.transform = `translateX(-${0}%)`;
        }

        // console.log(nav.offsetWidth, title.offsetLeft);
        // console.log("nav", nav, title);
        // 计算位移偏差
        // const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
        // console.log(to);
        // console.log(title.offsetLeft, title.offsetWidth);
        // active.left = title.offsetLeft + title.offsetWidth / 2 + "px";
        // active.scrollLeft = to;
      });
    },
    getTranslateX(myElement) {
      const style = window.getComputedStyle(myElement);
      const matrix = new WebKitCSSMatrix(style.webkitTransform);
      //  console.log('translateX: ', matrix.m41);
    },
    // 滑动
    scrollLeftTo(name) {
      this.$nextTick(() => {
        const ref = `tab${name}Ref`;
        // 获取myTabRef的DOM元素，即类名为my-tab的标签
        const nav = this.$refs.myTabRef;
        const active = this.$refs.navActive.style;

        // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
        const title = this.$refs[ref][0];
        // console.log(nav.offsetWidth, title.offsetLeft);
        // console.log("nav", nav, title);
        // 计算位移偏差
        const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
        // console.log(to);
        // console.log(title.offsetLeft, title.offsetWidth);
        active.left = `${title.offsetLeft + title.offsetWidth / 2}px`;
        // active.scrollLeft = to;
      });
    },
  },
};
</script>
<style>
[v-cloak] {
  display: none;
}
</style>
<style lang="scss" scoped>
#home {
  position: relative;
  width: 100%;

  &::after {
    // content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../assets/images/home-bg.jpg") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  .page {
    // padding: fh(152vh, pc) fw(80vw, pc) 0 fw(80vw, pc);
    background: #fff;
    margin-top: -23px;
    //   #home .page::after {
    // content: "";
    // position: absolute;
    // left: 0;
    // top: 0;
    // z-index: -1;
    // width: 100%;
    // height: max-content;
    // background: url("../assets/images/home-bg.jpg") no-repeat;
    // background-size: cover;
    // background-position: center 0;
    // }
    .banner-big-info {
      position: absolute;
      width: 45%;
      height: 35%;
      background: rgb(10, 172, 236);
      background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/49dacf59dfa34990ab7098d396592c3a_mergeImage.png);
      right: 0;
      bottom: 0;
      .banner-big-info-who {
        position: absolute;
        top: -48px;
        left: 24px;
        color: rgba(255, 255, 255, 1);
        font-size: 80px;
        font-family: "Helvetica-BoldOblique";
      }
      .banner-big-info-content {
        color: rgba(255, 255, 255, 1);
        font-size: 15px;
        font-family: "PingFangSC-Medium";
        padding: 40px;
        line-height: 24px;
      }
      .banner-big-info-more {
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        font-family: "PingFangSC-Medium";
        position: absolute;
        right: 30px;
        bottom: 40px;
      }
    }
  }

  .page-content {
    background-color: #fff;
    // padding: 0 fw(80vw, pc) fh(40vh, pc) fw(80vw, pc);
  }

  // ::v-deep .el-carousel {
  //   background: rgba(15, 0, 0, 1);
  // }

  .lm-bottom {
    width: 100%;
    display: flex;
    margin-top: fh(40vh, pc);

    .lm-title {
      width: 100%;
      font-size: fh(24vh, pc);
      font-weight: bold;
      color: $zh;
      line-height: fh(36vh, pc);
      text-align: center;
      padding: fh(12vh, pc) 0;
      background-color: #f6f6f6;
      font-weight: 800;

      &:hover {
        color: $zh;
        opacity: 0.8;
        cursor: pointer;
      }
    }

    .left-col {
      width: fw(560vw, pc);
      padding-bottom: fh(50vh, pc);
      position: relative;

      .more {
        position: absolute;
        right: fw(20vw, pc);
        bottom: fh(20vh, pc);
        font-size: fh(14vh, pc);
        line-height: fh(20vh, pc);
        color: #686a67;

        &:hover {
          color: $zh;
          opacity: 0.8;
          cursor: pointer;
        }
      }

      > .more {
        bottom: 0;
      }

      .col-view {
        .col-item {
          width: 100%;
          padding: fh(16vh, pc) 0;
          border-bottom: 1px solid #edf1f3;
          position: relative;

          > div {
            overflow: hidden;
          }

          .text-view {
            flex: 1;
          }

          .img-view {
            width: 100%;
            max-height: fh(320vh, pc);
            overflow: hidden;

            img {
              width: 100%;
            }
          }

          .item-title {
            width: 100%;
            font-size: fh(20vh, pc);
            line-height: fh(25vh, pc);
            color: $sh;
            font-weight: 600;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            height: fh(24vh, pc);

            &:hover {
              color: $zh;
              opacity: 0.8;
              cursor: pointer;
            }
          }

          &.first {
            padding-top: 0;

            .item-title {
              word-break: keep-all; /* 不换行 */
              white-space: break-spaces;
              padding-top: fh(20vh, pc);
              line-height: fh(30vh, pc);
              height: max-content;
            }
          }

          .item-content {
            margin-top: fh(20vh, pc);
            font-size: fh(14vh, pc);
            line-height: fh(22vh, pc);
            color: #686a67;
          }
        }
      }
    }

    .right-col {
      margin-left: fw(40vw, pc);
      flex: 1;

      .col-line {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .line-item {
          position: relative;
          flex: 1;
          width: fw(550vw, pc);
          overflow: hidden;

          .img-view {
            max-height: fh(320vh, pc);

            img {
              width: 100%;
              //min-height: fh(320vh, pc);
            }
          }

          .item-view {
            .item-title {
              position: absolute;
              bottom: 0;
              width: 100%;
              padding: fh(20vh, pc) fw(20vw, pc);
              font-size: fh(20vh, pc);
              color: #fbfeff;
              line-height: fh(30vh, pc);
              font-weight: 600;

              &:hover {
                opacity: 0.8;
                cursor: pointer;
              }
            }
          }
        }

        &:nth-child(2) {
          .line-item:nth-child(1) {
            margin-right: fw(40vw, pc);
          }
        }

        &:nth-child(1) {
          margin-bottom: fh(40vh, pc);
          background-color: #ececec;
          padding-bottom: fh(20vh, pc);

          .line-item:nth-child(2) {
            margin-right: 0;
          }

          > .lm-title:nth-child(1) {
            position: relative;
            background-color: #f6f6f6;

            .more {
              position: absolute;
              top: 50%;
              right: fw(20vw, pc);
              transform: translateY(-50%);
              font-size: fh(14vh, pc);
              line-height: fh(20vh, pc);
              color: #686a67;
              font-weight: 500;

              &:hover {
                color: $zh;
                opacity: 0.8;
                cursor: pointer;
              }
            }
          }

          .line-item {
            background-color: #ececec;
            margin: 0 fw(20vw, pc);

            .lm-title {
              position: relative;
              background-color: #ececec;

              span {
                color: $sh;
                font-size: fh(18vh, pc);
              }

              &:hover {
                //cursor: default;
                //opacity: 1;
              }
            }
          }
        }
      }
    }
  }
  //@at-root
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  //
  .archives_box {
    background-color: rgba(0, 93, 176, 1);

    width: 60%;
    display: flex;
    margin: 0 auto;
    margin-top: fh(30vh, pc);
    img {
      width: 50%;
      margin-left: 10px;
    }
    .archives_box_right {
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      span:nth-child(1) {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        font-family: "PingFangSC-Semibold";
        font-weight: 600;
        text-align: left;
        line-height: 20px;
        margin-top: 20px;
      }
      span:nth-child(2) {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        font-family: "PingFangSC-Semibold";
        font-weight: 300;
        text-align: left;
        white-space: nowrap;
        margin: 35px 0 16px 0;
      }
      span:nth-child(3) {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        font-family: "PingFangSC-Semibold";
      }
    }
  }
  .last_more_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 155, 30, 1);
    border-radius: 30px;
    width: 147px;
    height: 41px;
    text-align: center;
    line-height: 41px;
    margin: 21px auto;
    font-family: "PingFangSC-Semibold";
  }
  .do_list {
    width: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    margin: 0 auto;
    .do_list_item {
      display: flex;
      flex-direction: column;
      justify-content: center;

      span:nth-child(2) {
        overflow-wrap: break-word;
        color: rgba(0, 93, 176, 1);
        font-size: 20px;
        font-family: "PingFangSC-Semibold";
        font-weight: 600;
        line-height: 57px;
      }
      span:nth-child(3) {
        overflow-wrap: break-word;
        color: rgba(42, 42, 42, 1);
        font-size: 13px;
        font-weight: normal;
        line-height: 16px;
        font-family: "PingFangSC-Semibold";
      }

      .do_list_item_btn {
        background-color: rgba(255, 155, 30, 1);
        border-radius: 30px;
        width: 147px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        margin: 26px auto;
        font-family: "PingFangSC-Semibold";
      }
      img {
        width: 286px;
      }
    }
  }
  .advertise_view_title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fh(150vh, pc);
    font-size: fh(40vh, pc);
    overflow-wrap: break-word;
    color: rgba(0, 93, 176, 1);
    font-size: 50px;
    font-family: "Helvetica-BoldOblique";
    font-weight: normal;
    margin-top: 6px;
  }

  .advertise-view {
    height: fh(800vh, pc);
    background-color: rgba(0, 93, 176, 1);
    margin-top: -20px;
    width: 100%;
    .advertise-view-top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 60%;
      margin: 0 auto;
      padding-top: 20px;
      .adv_view_top_right {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        width: 43%;
        span:nth-child(1) {
          color: rgba(255, 255, 255, 1);
          font-size: 18px;
          font-family: "PingFangSC-Semibold";
          font-weight: 600;
          line-height: 20px;
        }
        span:nth-child(2) {
          color: rgba(255, 255, 255, 1);
          font-size: 12px;
          font-family: "PingFangSC-Semibold";
          font-weight: 600;
          padding: 10px 0;
        }
        span:nth-child(3) {
          color: rgba(255, 255, 255, 1);
          font-size: 15px;
          overflow-wrap: break-word;
          line-height: 18px;
        }
      }
    }
    .advertise-view-center {
      background: rgba(0, 160, 225, 1);
      width: 48%;
      height: fh(105vh, pc);
      position: relative;
      margin-top: fh(60vh, pc);
      margin-bottom: fh(36vh, pc);
      span {
        position: absolute;
        top: -19px;
        right: -78px;
        color: rgba(255, 255, 255, 1);
        font-size: 69px;
        overflow-wrap: break-word;
        font-family: "Helvetica-BoldOblique";
        font-weight: normal;
      }
    }
    .advertise-view-bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 60%;
      margin: 0 auto;
      .adv_view_bot_item {
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-bottom: fh(50vh, pc);
        span:nth-child(1) {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          font-family: "PingFangSC-Semibold";
          font-weight: 600;
          line-height: 21px;
          margin-bottom: 12px;
        }
        span:nth-child(2) {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 12px;
          font-family: "PingFangSC-Semibold";
          font-weight: 600;
          line-height: 16px;
        }
      }
    }
  }

  .say-row {
    > .line {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: fh(40vh, pc);
      width: 100%;
      margin-bottom: fh(40vh, pc);
    }

    ::v-deep .hot-article {
      width: fw(560vw, pc);
      padding-top: fh(12vh, pc);
      padding-bottom: fh(22vh, pc);

      .article-item {
        margin-bottom: fh(20vh, pc) !important;
      }
    }

    ::v-deep .book-view {
      margin-top: 0;
      width: fw(560vw, pc);

      .book-content {
        padding-bottom: fh(30vh, pc);

        .book-row {
          padding-top: fh(26vh, pc);
          padding-bottom: fh(12vh, pc);
        }
      }
    }
  }

  .img-say {
    background-color: $dh;
    position: relative;

    .say-more {
      position: absolute;
      right: fw(20vw, pc);
      bottom: fh(16vh, pc);
      color: rgba(255, 255, 255, 0.5);
      font-size: fh(14vh, pc);

      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }

    .say-label {
      color: $zh;
      position: relative;
      display: inline-block;
      font-size: fh(24vh, pc);
      font-weight: 800;
      margin-top: fh(20vh, pc);
      margin-bottom: fh(10vh, pc);
      padding-left: fw(20vw, pc);
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      img {
        position: absolute;
        bottom: fh(-16vh, pc);
        right: fw(-12vw, pc);
        width: fw(42vw, pc);
      }

      // &::after {
      //   content: "";
      //   position: absolute;
      //   bottom: fh(-16vh, pc);
      //   right: fw(-12vw, pc);
      //   width: fw(30vw, pc);
      //   height: fh(18vh, pc);
      //   border-right: fw(6vw, pc) solid $zh;
      //   border-bottom: fw(8vw, pc) solid $zh;
      // }
    }

    .say-view {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 fw(20vw, pc);
      padding-top: fh(26vh, pc);
      // padding-bottom: fh(30vh, pc);
      .say-item {
        width: 32.5%;
        position: relative;
        margin-bottom: fh(30vh, pc);

        img {
          width: 100%;
          display: block;
        }

        .say-content {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          color: #fff;
          padding: fh(20vh, pc) fw(20vw, pc);
          padding-top: fh(80vh, pc);
          box-shadow: 0px -109px 46px -32px rgba(15, 0, 0, 0.7) inset;

          .item-title {
            color: $sh;
            font-size: fh(20vh, pc);
            min-height: fh(52vh, pc);
            // margin-bottom: fh(20vh, pc);
            font-weight: 600;
            line-height: fh(26vh, pc);
            overflow: hidden;
          }

          .item-content {
            font-size: fh(14vh, pc);
            line-height: fh(20vh, pc);
            font-weight: 400;
          }
        }
      }
    }
  }

  .num-row {
    margin-top: fh(40vh, pc);

    .num-info {
      background-color: #fff;

      .info-title {
        position: absolute;
        top: fh(20vh, pc);
        left: fw(20vw, pc);
        z-index: 99;
      }

      .say-more {
        position: absolute;
        right: fw(20vw, pc);
        top: fh(10vh, pc);
        color: rgba(255, 255, 255, 0.5);
        font-size: fh(12vh, h5);

        &:hover {
          color: #fff;
          cursor: pointer;
        }
      }

      // padding: fh(20vh, pc) fw(20vw, pc) fh(20vh, pc) fw(20vw, pc);
    }

    .title-view {
      width: 100%;
      overflow: hidden;
      // overflow-x: scroll;
      .view-max {
        display: flex;
        align-items: center;
        width: max-content;
        white-space: nowrap;
        transition: all 0.3s;
      }

      .title-item {
        // float: left;
        position: relative;
        width: fw(400vw, pc);
        height: fh(120vh, pc);
        background-size: cover !important;
        font-size: fh(20vh, pc);
        color: #fff;
        line-height: 150%;
        text-align: center;
        font-weight: bold;
        margin-right: 10px;

        span {
          position: absolute;
          width: 90%;
          left: 5%;
          top: 50%;
          transform: translateY(-50%);
          white-space: pre-line;
        }

        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
    }

    .num-label {
      color: $zh;
      position: relative;
      display: inline-block;
      font-size: fh(24vh, pc);
      font-weight: 800;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      img {
        position: absolute;
        bottom: fh(-16vh, pc);
        right: fw(-12vw, pc);
        width: fw(42vw, pc);
      }
    }

    .num-view {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      // justify-content: space-between;
      // padding: 0 fw(40vw, pc);
      // padding-top: fh(60vh, pc);
      > img {
        width: 100%;
      }

      .num-title {
        width: 35%;
        background-color: #ec9461;
        margin-right: 3%;
        margin-bottom: fh(20vh, pc);
        font-size: fh(30vh, pc);
        color: $zh;
        text-align: center;
        padding: fh(10vh, pc) 0;
      }

      .num-item {
        width: 11.5%;
        padding-bottom: fh(30vh, pc);
        margin-right: 8.5%;

        .item-title {
          color: $sh;
          font-size: fh(32vh, pc);
          padding-bottom: fh(16vh, pc);
        }

        .item-content {
          font-size: fh(14vh, pc);
          line-height: fh(20vh, pc);
        }
      }
    }
  }

  .banner-col {
    display: flex;
    align-content: flex-start;
    width: 100%;
    // margin-right: fw(20vw, pc);
    position: relative;
    cursor: pointer;
    // ::v-deep .el-carousel__container {
    //   height: fh(610vh, pc) !important;
    // }
    .el-carousel {
      width: fw(1200vw, pc);
      min-height: 60vh;

      img {
        height: inherit;
        width: 100%;
        display: block;
      }
    }

    .col-text {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      // align-items: center;
      .text-item {
        display: flex;
        align-items: center;
        width: 100%;
        color: $sh;
        padding: fh(20vh, pc) fw(40vw, pc);
        background-color: #f5f5f5;
        font-size: fh(18vh, pc);
        line-height: fh(26vh, pc);
        margin: 0;
        border-bottom: 2px solid #b2bfc3;

        &:hover {
          color: #3b64fd;
        }

        > div {
          position: relative;

          &::before {
            display: none;
            content: "";
            position: absolute;
            border-style: solid;
            border-color: transparent;
            border-width: 5px 0 5px 5px;
            border-left-color: #fff;
            left: fw(-9vw, pc);
            top: fh(12vh, pc);
          }
        }

        &.active {
          position: relative;
          background-color: #3b64fd;
          color: #fff;
          // font-weight: bold;
          font-size: fh(24vh, pc);
          line-height: fh(36vh, pc);

          > div::before {
            display: block;
          }
        }

        &:nth-last-child(1) {
          border: none;
        }

        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }
      }
    }
  }

  &.h5 .banner-col {
    position: relative;

    .el-carousel {
      width: 100%;
      min-height: auto;
      padding-bottom: 42px;
      //background-color: #f1f1f1;

      .el-carousel__item {
        background-color: #f1f1f1;
      }
    }

    .col-text {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 9;
      width: 100%;

      .text-item {
        width: 100%;
        padding: fh(10vh, h5) fw(10vw, h5);
        font-size: fh(14vh, h5);
        line-height: fh(16vh, h5);
        white-space: nowrap;
        opacity: 0.8;

        > div {
          position: relative;

          &::before {
            display: none;
          }
        }
      }
    }
  }

  .cat-view {
    .cat-item {
      margin-top: fh(44vh, pc);
      position: relative;
      color: #fff;
      overflow: hidden;

      .cat-label {
        position: absolute;
        left: 0;
        top: -1px;
        width: fw(185vw, pc);
        height: fh(66vh, pc);
        line-height: fh(66vh, pc);
        text-align: center;
        z-index: 2;
        color: $zh;
        background: url("../assets/images/cat-lable-bg.png") no-repeat;
        background-size: cover;
        font-size: fh(24vh, pc);
        font-weight: bold;

        &.en {
          line-height: fh(24vh, pc);

          span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -60%);
          }
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .cat-img {
        display: block;
        width: 100%;
      }

      .cat-content {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: fh(20vh, pc) fw(20vw, pc);
        box-shadow: 0px -109px 46px -32px rgba(15, 0, 0, 0.7) inset;

        .content-title {
          width: 100%;
          font-size: fh(20vh, pc);
          line-height: fh(26vh, pc);
          height: fh(50vh, pc);
          font-weight: 600;
        }

        .content {
          width: 100%;
          font-size: fh(14vh, pc);
          font-weight: 400;
          line-height: fh(20vh, pc);
          margin: fh(12vh, pc) 0;
        }

        .cat-more {
          float: right;
          font-size: fh(14vh, pc);
          font-weight: 600;
          line-height: fh(20vh, pc);

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

#home.h5 {
  .page {
    padding-top: fh(60vh, h5) !important;
  }

  ::v-deep .hot-article {
    width: 100%;
  }

  ::v-deep .book-view {
    width: 100%;
  }

  .lm-bottom {
    flex-wrap: wrap;

    .left-col {
      width: 100%;

      .col-view .col-item.first .scale-view {
        width: 100%;

        img {
          width: 100%;
        }
      }
    }

    .right-col {
      width: 100%;
      margin-top: fh(30vh, h5);
      margin-left: 0;

      .col-line:nth-child(1) .line-item {
        width: 100%;
      }

      .col-line .line-item {
        width: 100%;
        flex: auto;
        margin: 0;
        margin-bottom: fh(20vh, h5);

        .img-view,
        img {
          height: auto;
          max-height: max-content;
        }

        .item-view .item-title {
          padding: fh(10vh, h5) fw(10vw, h5);
        }
      }
    }
  }

  .banner-item {
    .item-content .content-title {
      .title1 {
        width: max-content;
        padding-right: fw(10vw, h5);
      }

      .title2 {
        padding: 0;
        line-height: 20px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        // 下面这句用来控制行数
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        flex: 1;
      }
    }
  }

  // ::v-deep .el-carousel__container {
  //   height: fh(86vh, h5) !important;
  // }
  .num-row {
    margin-top: fh(50vh, h5);

    .num-info {
      .info-title {
        top: 0;
        transform: translateY(-100%);
        width: 100%;
        background-color: #2e2e2e;
        padding: fh(10vh, h5) fh(4vh, h5);
        padding-top: fh(3vh, h5);
        left: 0;

        .num-label {
          font-size: fh(12vh, h5);

          img {
            width: fw(16vw, h5);
            bottom: fh(-4vh, h5);
            right: fw(-4vw, h5);
          }
        }
      }
    }
  }

  .num-row .title-view .title-item {
    width: 230px;
    height: 66px;
    line-height: 16px;
    font-size: 12px;
    background-size: cover !important;
  }

  .say-row {
    flex-wrap: wrap;

    .row-right {
      margin: 0;
      margin-top: 0;

      .hot-article .article-view .article-item {
        width: 90vw;
      }

      .book-content .book-row {
        align-items: center;

        img.book-img {
          width: 51%;
          height: auto;
        }

        .book-text {
          flex: 1;
          margin-left: fw(10vw, h5);
        }
      }

      .book-content .book-btn {
        img {
          width: 30%;
        }
      }
    }

    .img-say {
      width: 100%;

      .say-view {
        padding: fw(10vw, h5);

        .say-item {
          width: 49%;
          margin-bottom: fh(12vh, h5);
          height: max-content !important;

          .say-content {
            padding: 10px 6px;
            padding-top: 80px;

            .item-title {
              color: $sh;
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }

      .say-label {
        font-size: fh(12vh, h5);
        margin-top: fh(15vh, h5);
        margin-bottom: 0;

        img {
          width: fw(16vw, h5);
          bottom: fh(-4vh, h5);
          right: fw(-4vw, h5);
        }

        // &:after {

        //   height: fh(10vh, h5);
        //   border-right: 2px solid $zh;
        //   border-bottom: 2px solid $zh;
        // }
      }

      .say-more {
        font-size: fh(12vh, h5);
        top: fh(15vh, h5);
      }
    }
  }

  .cat-view.el-row {
    display: flex;
    flex-wrap: wrap;

    .el-col {
      width: 50%;

      .cat-item {
        margin-top: fh(20vh, h5);

        .cat-label {
          width: 52%;
          font-size: fh(14vh, h5);
          height: fh(32vh, h5);
          line-height: fh(32vh, h5);

          span {
            line-height: 110%;
          }
        }
      }
    }
  }
}

.en #home.h5 .cat-view.el-row .el-col .cat-item .cat-label {
  width: 90px;
  height: 32px;
  font-size: 12px;
}

.h5#home .img-say .say-view .say-item {
  .say-content .item-title {
    color: $sh;
    margin-bottom: 0;
  }
}
.verify {
  z-index: 5;
}

.verify::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3c3b3b;
  opacity: 0.5;
  /* 半透明黑色 */
  z-index: -1;
  /* 将遮罩层的层级放到最底层 */
}
</style>
